<template>
    <div class="container">
        <el-table ref="tableRef" :row-style="{ height: '40px' }" :highlight-current-row="false"
            :header-row-style="{ background: 'transparent', border: '0 none' }" :data="data"
            style="width: 100%;height: 100%;">
            <el-table-column type="index" align="center" label="#" width="60" />
            <el-table-column prop="sendTime" align="center" label="发送时间" width="150" />
            <el-table-column v-if="isPerson" label="目标人员" width="150" align="center">
                <template #default="scope">
                    <span v-if="scope.row.targetPerson == 1">风险区域全部人员</span>
                    <span v-else-if="scope.row.targetPerson == 2">内圈区域全部人员</span>
                    <span v-else-if="scope.row.targetPerson == 3">风险区域负责人</span>
                </template>
            </el-table-column>
            <el-table-column prop="context" label="内容文案" align="center" />
            <el-table-column fixed="right" label="风险等级" width="150" align="center">
                <template #default="scope">
                    <span v-if="scope.row.riskLevel == 1">高风险</span>
                    <span v-else-if="scope.row.riskLevel == 2">极高风险</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const pro = defineProps({
    data: {
        type: Array,
        required: true,
        default: () => ([])
    },
    isPerson: {
        type: Boolean,
        required: true,
        default: false
    }
})

let timer = null;
let tableRef = ref(null);
const scroll = () => {
    // 在执行新的计时器前将之前的计时器清除
    if (timer) clearInterval(timer);
    let status = true;
    // 获取表格滚动区域的dom
    const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];

    // 增加监听事件鼠标移入停止滚动
    scrollDom.addEventListener('mouseover', () => {
        status = false;
    });
    // 鼠标移出恢复滚动
    scrollDom.addEventListener('mouseout', () => {
        status = true;
    });

    // 设置每秒滚动一行
    timer = setInterval(() => {
        if (status) {
            // 当滚动到底部时修改scrollTop回到顶部
            if (scrollDom.scrollHeight == (scrollDom.clientHeight + scrollDom.scrollTop)) {
                scrollDom.scrollTop = 0;
            } else {
                // 设置每次滚动的像素
                scrollDom.scrollTop += 40;
            }
        }
    }, 1000);
}

onMounted(() => {
    setTimeout(() => { scroll() }, 1000)
})

onUnmounted(() => {
    // 组件卸载记得清除计时器
    if (timer) clearInterval(timer);
    timer = null;
})
</script>

<style lang="less" scoped>
span {
    color: #0bb8af;
}

.container {
    width: 100%;
    height: 100%;
}

:deep(.el-table),
:deep(.el-table th.el-table__cell) {
    background: transparent !important;
    border: 0 none;
}

:deep(.el-table .cell) {
    color: white;
}

:deep(.el-table__row:nth-child(odd)) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 30px;
    overflow: hidden;
    /* border: 0 none; */
    height: 40px;
}
</style>